<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
#main div{ float:left; background:orange; width:100px; height:50px; text-align:center; line-height:50px; margin-right:10px; color:white ; font-weight:bold; font-size:30px;}
#box{width:200px; height:200px; background:red; margin-top:100px;}
</style>
<script src="jquery-1.11.0.js"></script>
<script>
$(function(){
/*	$('input:eq(0)').click(function(){
		$(' #main div').eq(0).show('slow',function(){
			$(' #main div').eq(1).show	(function(){
			$(' #main div').eq(2).show	(function(){
			$(' #main div').eq(3).show	(function(){
			$(' #main div').eq(4).show	(function(){
						})
					})
				})
			})
		})
	})
	*///列队动画，这样写的话很容易犯错，而且如果div多的话就不好办-------下面通过函数的递归就可以简单的实现
	$('input:eq(0)').click(function(){
	$('#main div').first().show(function startMove(){
		$(this).next().show('slow',startMove)
		})
})	
	$('input:eq(1)').click(function(){
	$('#main div').last().hide('slow',function startMove(){
		$(this).prev().hide('slow',startMove)
		})
})	

/*	$('input:eq(2)').click(function(){
		$('#box').animate({
				width:'300px'
			},function(){
		$('#box').animate({
				height:'300px'
			})
		})
	})
*/
$('input:eq(2)').click(function(){
	$('#box').animate({width:'300px'}).animate({height:'300px'}).animate({opacity:0.5})
	})
$('input:eq(3)').click(function(){
	$('#box').stop()//停止当前的运动效果  接着进行下一个动画效果
	})
})

</script>
</head>

<body>
<div id="main">
<div>你</div>
<div>还</div>
<div>好</div>
<div>吗</div>
<div>？</div>
</div>
<input type="button" value="显示" />
<input type="button" value="隐藏" />
<div id='box'>这是用来变形的DIV</div>
<input type="button" value="变幻开始" />
<input type="button" value="变幻结束" />
</body>
</html>
